<template>
  <view class="container">
    <!-- 客服信息区域 -->
    <view class="service-section">
      <view class="service-text">
        <text class="greeting">Hi, 请问有什么么可以帮您的吗?</text>
        <text class="service-time">欢迎一起讨论交流！ </text>
      </view>
      <view class="qr-code">
        <image src="/static/images/er.png" mode="aspectFit"></image>
      </view>
    </view>

    <!-- 常见问题区域 -->
    <view class="faq-section">
      <view class="section-title">
        <text>电商常见问题解决</text>
        <view class="title-underline"></view>
      </view>
      
	  
      <view class="faq-list">
        <view class="faq-item" v-for="(item, index) in questionList" :key="index" @tap="handleFaqClick(item)">
          <text>{{ item.title }}</text>
        </view>
      </view>
	  
	  
    </view>
  </view>
</template>

<script>
	import {fetchQuestionList, baseUrl,fetchGroupDetail} from "@/api/api.js"
export default {
  name: 'Consultation',
  data() {
    return {
		questionList:[],
		groupData:{
			description:"",
			name:"",
			smallimage:"",
			path:"pages/calculator/calculator"
		},
      faqList: [
        '抖音平台货款冻结提现解决办法',
        '抖音平台前川投放开户',
        'Google广告到底应该怎么玩',
        '百度还适合做搜索投放吗'
      ]
    }
  },
  mounted() {
  	this.handleFetchQuestion()
	this.handleFetchGroup()
  },
  onLoad() {
  	uni.showShareMenu({
  		withShareTicket: true, // 是否使用带 shareTicket 的转发详情
  		menus: ['shareAppMessage', 'shareTimeline'] // 需要显示的菜单项，默认全部显示
  	});
  },
  onShareAppMessage() { //发送给朋友
  	return {
  		title: this.groupData.description,
  		imageUrl: this.groupData.smallimage,
  		path:this.groupData.path
  	}
  },
  onShareTimeline() { //分享到朋友圈
  	return {
  		title: this.groupData.description,
  		imageUrl: this.groupData.smallimage,
  		path:this.groupData.path
  	}
  },
  methods: {
	async handleFetchQuestion() {
	  	try {
	  		const result = await fetchQuestionList();
	  		this.questionList = result.data.map(item => {
	  		  return {
	  		   ...item,
	  		    smallimage: baseUrl + item.smallimage
	  		  };
	  		});
	  		
	  	  } catch (error) {
	  		console.error('Fetch resource failed:', error);
	  	  }	 
	  	  
	  },
	  
    async handleFetchGroup() {
    	try {
    		const result = await fetchGroupDetail(4);
    		this.groupData = result.data
    		this.groupData.smallimage=baseUrl + this.groupData.smallimage
    	} catch (error) {
    		console.error('Fetch resource failed:', error);
    	}
    },
	handleFaqClick(item) {
      // 处理FAQ点击事件
      // console.log('Clicked FAQ item:', this.faqList[index])
	  uni.navigateTo({
	    url: `/pages/consultation/detail?id=${item.id}`
	  })
    }
  }
}
</script>

<style>
.container {
  padding: 30rpx;
  background-color: #FFF8F0;
  min-height: 100vh;
}

.service-section {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 60rpx;
}

.service-text {
  flex: 1;
  padding-right: 30rpx;
}

.greeting {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.service-time {
  font-size: 28rpx;
  color: #666;
}

.qr-code {
  width: 240rpx;
  height: 240rpx;
}

.qr-code image {
  width: 100%;
  height: 100%;
}

.faq-section {
  margin-top: 40rpx;
}

.section-title {
  margin-bottom: 30rpx;
  position: relative;
}

.section-title text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.title-underline {
  position: absolute;
  left: 0;
  bottom: -10rpx;
  width: 120rpx;
  height: 8rpx;
  background-color: #FFD591;
  border-radius: 4rpx;
}

.faq-list {
  margin-top: 40rpx;
}

.faq-item {
  font-size: 32rpx;
  color: #333;
  padding: 30rpx 0;
  border-bottom: 2rpx solid #EAEAEA;
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item:active {
  opacity: 0.7;
}
</style> 